<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
		<title>哔哩哔哩大数据分析</title>
		<link rel="stylesheet" href="css/app.css" />
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/echarts.minn.js"></script>
		<script type="text/javascript" src="js/js.js"></script>
		<script type="text/javascript" src="js/jquery.limarquee.js"></script>
		<script type="text/javascript" src="js/jquery.cxselect.min.js"></script>
		<script type="text/javascript" src="js/jdjh.js"></script>
<script type="text/javascript">
		  function getCurDate() {
		var d = new Date();
		var years = d.getFullYear();
		var month = add_zero(d.getMonth() + 1);
		var days = add_zero(d.getDate());
		var hours = add_zero(d.getHours());
		var minutes = add_zero(d.getMinutes());
		var seconds = add_zero(d.getSeconds());
		var ndate = years + "年" + month + "月" + days + "日 " + hours + ":"
				+ minutes + ":" + seconds;
		var divT = document.getElementById("logInfo");
		divT.innerHTML = ndate;
	}
	function add_zero(temp) {
		if (temp < 10)
			return "0" + temp;
		else
			return temp;
	}
	setInterval("getCurDate()", 100);
	</script>
		<style type="text/css">
			a:LINK {
				color: red;
				text-decoration: none;
			}
			a:VISITED {
				color: white;
				text-decoration: none;
			}
			a:HOVER {
				background-color: #0088ff;
				text-decoration: none;
			}
		</style>
	</head>
	<body class="bg01">
		<div class="header">
			<h1 class="header-title">哔哩哔哩大数据分析</h1>
			<div id="logInfo" style="text-align: left;color: #fff;position: relative;left: 10px;">
				<script type="text/JavaScript" language="JavaScript">
			getCurDate();
		</script>
			</div>
		</div>
		<div class="wrapper">
			<div class="content">
				<div class="col col-l">
					<div class="xpanel-wrapper xpanel-wrapper-5" >
						<div class="xpanel xpanel-r-a">
							<div class="title"><a href="detail">排行统计</a></div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-45">
						<div class="xpanel xpanel-l-t">
							<div class="title">分区热门视频播放量</div>
							<div id ="raCharts" class="bcontent">
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-45">
						<div class="xpanel xpanel-l-b">
							<div class="title">分区热门视频评论数</div>
							<div id ="ryCharts" class="bcontent">
							</div>
						</div>
					</div>
				</div>
				<div class="col col-c">
					<div class="xpanel-wrapper xpanel-wrapper-45">
						<div  class="xpanel xpanel-c-b">
							<div class="title">分区每日新增稿件</div>
							<div id="clCharts" class="bcontent">
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-55">
						<div  class="xpanel xpanel-c-b">
							<div class="title">各时段综合投稿数（10倍放大）及综合播放量</div>
							<div class="bcontent" id="gCharts"></div>
						</div>
					</div>
				</div>
				<div class="col col-r">
					<div class="xpanel-wrapper xpanel-wrapper-30" >
						<div class="xpanel xpanel-r-t">
							<div class="title">分区热门视频点赞量</div>
						    <div id="jqCharts" class="bcontent">
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-30" >
						<div class="xpanel xpanel-r-m">
							<div class="title">分区热门视频投币量</div>
							  <div id="wzCharts" class="bcontent">
							</div>
						</div>
					</div>
					<div class="xpanel-wrapper xpanel-wrapper-30" >
						<div class="xpanel xpanel-r-b">
							<div class="title">分区热门视频收藏量</div>
							  <div id="wlCharts" class="bcontent">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

	<script type="text/javascript">

//各分区热门视频投币量比较
// var rydom = document.getElementById("ryCharts");
// var ryCharts = echarts.init(rydom);
// ryoption = {
//     title: {
//             text: '热门视频投币量',
//             subtext: '模拟数据',
//             // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
//             x: 'center',
//             // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
//             y: 'top',
//             // itemGap设置主副标题纵向间隔，单位px，默认为10，
//             itemGap: 30,
//             backgroundColor: '#EEE',
//             // 主标题文本样式设置
//             textStyle: {
//               fontSize: 26,
//               fontWeight: 'bolder',
//               color: '#000080'
//             },
//             // 副标题文本样式设置
//             subtextStyle: {
//               fontSize: 18,
//               color: '#8B2323'
//             }
// 			,show:false
//           },
//     tooltip : {
//         trigger: 'item',
//         formatter: "{a} <br/>{b} : {c} ({d}%)",
//     },
//     legend: {
//        // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
//             orient: 'vertical',
//             // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
//             x: 'left',
//             // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
//             y: 'top',
//             itemWidth: 24,   // 设置图例图形的宽
//             itemHeight: 18,  // 设置图例图形的高
//             textStyle: {
//               color: '#FFFFFF' // 图例文字颜色
//             },
//             // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
//             itemGap: 8,
//            data:['番剧','动画','国创','音乐','舞蹈','游戏','知识','数码']
//     },
//     calculable : true,
// 	color:['#8B0000','#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9','#c96262'],
//     series : [
//         {
//             name:'热门视频投币量',
//             type:'pie',
//             radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
//             center: ['60%', '35%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
//             data:[
// 				{value:10, name:'番剧'},
// 				{value:15, name:'动画'},
// 				{value:25, name:'国创'},
// 				{value:30, name:'音乐'},
// 				{value:10, name:'舞蹈'},
// 				{value:15, name:'游戏'},
// 				{value:25, name:'知识'},
// 				{value:30, name:'数码'}
//             ],
// 			// itemStyle 设置饼状图扇形区域样式
//               itemStyle: {
//                 // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
//                 // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
//                 emphasis: {
//                   shadowBlur: 10,
//                   shadowOffsetX: 0,
//                   shadowColor: 'rgba(30, 144, 255，0.5)'
//                 }
// 			},
// 		 // 设置值域的那指向线
//               labelLine: {
//                 normal: {
//                   show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
//                 }
//               },
// 			   // 设置值域的标签
//               label: {
//                 normal: {
//                   position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
//                   // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
//                   // {a}指series.name  {b}指series.data的name
//                   // {c}指series.data的value  {d}%指这一部分占总数的百分比
//                   formatter: '{c}'
//                 }
//               }
// 		}
//     ]
// };
// if (ryoption && typeof ryoption === "object") {
//     ryCharts.setOption(ryoption, true);
// }

//各分区热门视频播放量比较
var rydom = document.getElementById("raCharts");
var ryCharts = echarts.init(rydom);
ryoption = {
	title: {
		text: '热门视频播放量',
		subtext: '模拟数据',
		// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
		x: 'center',
		// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
		y: 'top',
		// itemGap设置主副标题纵向间隔，单位px，默认为10，
		itemGap: 30,
		backgroundColor: '#EEE',
		// 主标题文本样式设置
		textStyle: {
			fontSize: 26,
			fontWeight: 'bolder',
			color: '#000080'
		},
		// 副标题文本样式设置
		subtextStyle: {
			fontSize: 18,
			color: '#8B2323'
		}
		,show:false
	},
	tooltip : {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {c} ({d}%)",
	},
	legend: {
		// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
		orient: 'vertical',
		// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
		x: 'left',
		// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
		y: 'top',
		itemWidth: 24,   // 设置图例图形的宽
		itemHeight: 18,  // 设置图例图形的高
		textStyle: {
			color: '#FFFFFF' // 图例文字颜色
		},
		// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
		itemGap: 8,
		data:["动画","国创","音乐","舞蹈","游戏","知识","数码","生活","鬼畜","时尚","娱乐","影视"]
	},
	calculable : true,
	color:['#8B0000', '#0a6c35', '#2f89cf', '#4cb9cf',
		   '#53b666', '#62c98d', '#205acf', '#c9c862',
		   '#c98b62', '#c962b9', '#7562c9','#c96262'],
	series : [
		{
			name:'热门视频播放量',
			type:'pie',
			radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
			center: ['60%', '35%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
			data:[
				{value:${hot.get(0).view}, name:'动画'},
				{value:${hot.get(5).view}, name:'国创'},
				{value:${hot.get(8).view}, name:'音乐'},
				{value:${hot.get(2).view}, name:'舞蹈'},
				{value:${hot.get(10).view}, name:'游戏'},
				{value:${hot.get(9).view}, name:'知识'},
				{value:${hot.get(7).view}, name:'数码'},
				{value:${hot.get(4).view}, name:'生活'},
				{value:${hot.get(1).view}, name:'鬼畜'},
				{value:${hot.get(3).view}, name:'时尚'},
				{value:${hot.get(11).view}, name:'娱乐'},
				{value:${hot.get(6).view}, name:'影视'}
			],
			// itemStyle 设置饼状图扇形区域样式
			itemStyle: {
				// emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
				// emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(30, 144, 255，0.5)'
				}
			},
			// 设置值域的那指向线
			labelLine: {
				normal: {
					show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
				}
			},
			// 设置值域的标签
			label: {
				normal: {
					position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
					// formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
					// {a}指series.name  {b}指series.data的name
					// {c}指series.data的value  {d}%指这一部分占总数的百分比
					formatter: '{c}'
				}
			}
		}
	]
};
if (ryoption && typeof ryoption === "object") {
	ryCharts.setOption(ryoption, true);
}

//各分区热门视频评论量比较
var rydom = document.getElementById("ryCharts");
var ryCharts = echarts.init(rydom);
ryoption = {
    title: {
            text: '热门视频投币量',
            subtext: '模拟数据',
            // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'center',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'top',
            // itemGap设置主副标题纵向间隔，单位px，默认为10，
            itemGap: 30,
            backgroundColor: '#EEE',
            // 主标题文本样式设置
            textStyle: {
              fontSize: 26,
              fontWeight: 'bolder',
              color: '#000080'
            },
            // 副标题文本样式设置
            subtextStyle: {
              fontSize: 18,
              color: '#8B2323'
            }
			,show:false
          },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
       // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'vertical',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'top',
            itemWidth: 20,   // 设置图例图形的宽
            itemHeight: 18,  // 设置图例图形的高
            textStyle: {
              color: '#FFFFFF'  // 图例文字颜色
            },
            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
            itemGap: 8,
           data:["动画","国创","音乐","舞蹈","游戏","知识","数码","生活","鬼畜","时尚","娱乐","影视"]
    },
    calculable : true,
	color:['#8B0000', '#0a6c35', '#2f89cf', '#4cb9cf',
		   '#53b666', '#62c98d', '#205acf', '#c9c862',
		   '#c98b62', '#c962b9', '#7562c9','#c96262'],
    series : [
        {
            name:'热门视频评论量',
            type:'pie',
            radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ['60%', '35%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data:[
				{value:${hot.get(0).reply}, name:'动画'},
				{value:${hot.get(5).reply}, name:'国创'},
				{value:${hot.get(8).reply}, name:'音乐'},
				{value:${hot.get(2).reply}, name:'舞蹈'},
				{value:${hot.get(10).reply}, name:'游戏'},
				{value:${hot.get(9).reply}, name:'知识'},
				{value:${hot.get(7).reply}, name:'数码'},
				{value:${hot.get(4).reply}, name:'生活'},
				{value:${hot.get(1).reply}, name:'鬼畜'},
				{value:${hot.get(3).reply}, name:'时尚'},
				{value:${hot.get(11).reply}, name:'娱乐'},
				{value:${hot.get(6).reply}, name:'影视'}
            ],
			// itemStyle 设置饼状图扇形区域样式
              itemStyle: {
                // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)'
                }
			},
		 // 设置值域的那指向线
              labelLine: {
                normal: {
                  show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                }
              },
			   // 设置值域的标签
              label: {
                normal: {
                  position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                  // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                  // {a}指series.name  {b}指series.data的name
                  // {c}指series.data的value  {d}%指这一部分占总数的百分比
                  formatter: '{c}'
                }
            }
		 }
    ]
};
if (ryoption && typeof ryoption === "object") {
    ryCharts.setOption(ryoption, true);
}

//热门视频点赞量
var jqdom = document.getElementById("jqCharts");
var jqCharts = echarts.init(jqdom);
jqoption = {
    title: {
            text: '热门视频点赞量',
             show:false
          },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
       // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'vertical',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'top',
            itemWidth: 24,   // 设置图例图形的宽
            itemHeight: 18,  // 设置图例图形的高
            textStyle: {
              color: '#FFFFFF'  // 图例文字颜色
            },
            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
            itemGap: 8,
           data:["动画","国创","音乐","舞蹈","游戏","知识","数码","生活","鬼畜","时尚","娱乐","影视"]
    },
    calculable : true,
	color:['#00CCFF', '#CC6600', '#8B0000', '#c23531',
		   '#2f4554', '#61a0a8', '#d48265', '#91c7ae',
		   '#749f83', '#ca8622', '#bda29a', '#6e7074'],
    series : [
        {
            name:'各分区热门视频点赞量比较',
            type:'pie',
            radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ['60%', '35%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data:[
				{value:${hot.get(0).like}, name:'动画'},
				{value:${hot.get(5).like}, name:'国创'},
				{value:${hot.get(8).like}, name:'音乐'},
				{value:${hot.get(2).like}, name:'舞蹈'},
				{value:${hot.get(10).like}, name:'游戏'},
				{value:${hot.get(9).like}, name:'知识'},
				{value:${hot.get(7).like}, name:'数码'},
				{value:${hot.get(4).like}, name:'生活'},
				{value:${hot.get(1).like}, name:'鬼畜'},
				{value:${hot.get(3).like}, name:'时尚'},
				{value:${hot.get(11).like}, name:'娱乐'},
				{value:${hot.get(6).like}, name:'影视'}
            ],
			// itemStyle 设置饼状图扇形区域样式
              itemStyle: {
                // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)'
                }
			},
		 // 设置值域的那指向线
              labelLine: {
                normal: {
                  show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                }
              },
			   // 设置值域的标签
              label: {
                normal: {
                  position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                  // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                  // {a}指series.name  {b}指series.data的name
                  // {c}指series.data的value  {d}%指这一部分占总数的百分比
                  formatter: '{d}%'
                }
              }
		}
    ]
};
if (jqoption && typeof jqoption === "object") {
    jqCharts.setOption(jqoption, true);
}

//热门视频投币量
var wzdom = document.getElementById("wzCharts");
var wzCharts = echarts.init(wzdom);
wzoption = {
    title: {
            text: '热门视频投币量',
            show:false
          },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
       // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
            orient: 'vertical',
            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
            x: 'left',
            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
            y: 'top',
            itemWidth: 24,   // 设置图例图形的宽
            itemHeight: 18,  // 设置图例图形的高
            textStyle: {
              color: '#FFFFFF'  // 图例文字颜色
            },
            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
            itemGap: 8,
           data:["动画","国创","音乐","舞蹈","游戏","知识","数码","生活","鬼畜","时尚","娱乐","影视"]
    },
    calculable : true,
	color:['#00CCFF', '#CC6600', '#8B0000', '#c23531',
		   '#2f4554', '#61a0a8', '#d48265', '#91c7ae',
		   '#749f83', '#ca8622', '#bda29a', '#6e7074'],
    series : [
        {
            name:'各分区热门视频投币量比较',
            type:'pie',
            radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            center: ['60%', '35%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            data:[
				{value:${hot.get(0).coin}, name:'动画'},
				{value:${hot.get(5).coin}, name:'国创'},
				{value:${hot.get(8).coin}, name:'音乐'},
				{value:${hot.get(2).coin}, name:'舞蹈'},
				{value:${hot.get(10).coin}, name:'游戏'},
				{value:${hot.get(9).coin}, name:'知识'},
				{value:${hot.get(7).coin}, name:'数码'},
				{value:${hot.get(4).coin}, name:'生活'},
				{value:${hot.get(1).coin}, name:'鬼畜'},
				{value:${hot.get(3).coin}, name:'时尚'},
				{value:${hot.get(11).coin}, name:'娱乐'},
				{value:${hot.get(6).coin}, name:'影视'}
            ],
			// itemStyle 设置饼状图扇形区域样式
              itemStyle: {
                // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(30, 144, 255，0.5)'
                }
			},
		 // 设置值域的那指向线
              labelLine: {
                normal: {
                  show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                }
              },
			   // 设置值域的标签
              label: {
                normal: {
                  position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                  // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                  // {a}指series.name  {b}指series.data的name
                  // {c}指series.data的value  {d}%指这一部分占总数的百分比
                  formatter: '{d}%'
                }
              }
		}
    ]
};
if (wzoption && typeof wzoption === "object") {
    wzCharts.setOption(wzoption, true);
}

//每个分区每日新增稿件统计
var wldom = document.getElementById("clCharts");
var wlCharts = echarts.init(wldom);
wloption = {
	title : {
		text: '每个分区每日新增稿件统计',
		subtext: 'a',
		show:false
	},
	color:['#00CCFF', '#CC6600','#8B0000','#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
	tooltip : {
		trigger: 'axis'
	},
	legend: {
		orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
		data:['数量'],
		x: 'center',               // 水平安放位置，默认为全图居中，可选为：
		y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
		textStyle: {
			color: '#FFFFFF'  // 图例文字颜色
		}
	},
	calculable : true,
	xAxis : [
		{
			type : 'category',
			data : ["番剧","动画","国创","音乐","舞蹈","游戏","知识","数码","生活","鬼畜","时尚","资讯","娱乐","影视","纪录片","电影","电视剧"],
			//设置坐标轴字体颜色和宽度
			axisLine: {
				lineStyle: {
					color: "#FFFFFF",
				}
			},
			splitLine: {show: false}
		}
	],
	yAxis : [
		{
			type : 'value',
			//设置坐标轴字体颜色和宽度
			axisLine: {
				lineStyle: {
					color: "#5dc2fe",
				}
			},
			splitLine: {show: false}
		}
	],
	series : [
		{
			name:'数量',
			type:'bar',
			data:[${dailyPost.douga}, ${dailyPost.anime}, ${dailyPost.guochuang}, ${dailyPost.music},
				  ${dailyPost.dance}, ${dailyPost.game}, ${dailyPost.technology}, ${dailyPost.digital},
				  ${dailyPost.life}, ${dailyPost.kichiku}, ${dailyPost.fashion}, ${dailyPost.information},
				  ${dailyPost.ent}, ${dailyPost.cinephile}, ${dailyPost.documentary}, ${dailyPost.movie}, ${dailyPost.tv}]
		},
	]
};
if (wloption && typeof wloption === "object") {
	wlCharts.setOption(wloption, true);
}

//热门视频收藏
var wzdom = document.getElementById("wlCharts");
var wzCharts = echarts.init(wzdom);
wzoption = {
	title: {
		text: '热门视频收藏',
		show:false
	},
	tooltip : {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {c} ({d}%)",
	},
	legend: {
		// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
		orient: 'vertical',
		// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
		x: 'left',
		// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
		y: 'top',
		itemWidth: 24,   // 设置图例图形的宽
		itemHeight: 18,  // 设置图例图形的高
		textStyle: {
			color: '#FFFFFF'  // 图例文字颜色
		},
		// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
		itemGap: 8,
		data:["动画","国创","音乐","舞蹈","游戏","知识","数码","生活","鬼畜","时尚","娱乐","影视"]
	},
	calculable : true,
	color:['#00CCFF', '#CC6600', '#8B0000', '#c23531',
		   '#2f4554', '#61a0a8', '#d48265', '#91c7ae',
		   '#749f83', '#ca8622', '#bda29a', '#6e7074'],
	series : [
		{
			name:'各分区热门视频收藏比较',
			type:'pie',
			radius: ['30%', '60%'],  // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
			center: ['60%', '35%'],  // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
			data:[
				{value:${hot.get(0).favorite}, name:'动画'},
				{value:${hot.get(5).favorite}, name:'国创'},
				{value:${hot.get(8).favorite}, name:'音乐'},
				{value:${hot.get(2).favorite}, name:'舞蹈'},
				{value:${hot.get(10).favorite}, name:'游戏'},
				{value:${hot.get(9).favorite}, name:'知识'},
				{value:${hot.get(7).favorite}, name:'数码'},
				{value:${hot.get(4).favorite}, name:'生活'},
				{value:${hot.get(1).favorite}, name:'鬼畜'},
				{value:${hot.get(3).favorite}, name:'时尚'},
				{value:${hot.get(11).favorite}, name:'娱乐'},
				{value:${hot.get(6).favorite}, name:'影视'}
			],
			// itemStyle 设置饼状图扇形区域样式
			itemStyle: {
				// emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
				// emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
				emphasis: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(30, 144, 255，0.5)'
				}
			},
			// 设置值域的那指向线
			labelLine: {
				normal: {
					show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
				}
			},
			// 设置值域的标签
			label: {
				normal: {
					position: 'inner',  // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
					// formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
					// {a}指series.name  {b}指series.data的name
					// {c}指series.data的value  {d}%指这一部分占总数的百分比
					formatter: '{d}%'
				}
			}
		}
	]
};
if (wzoption && typeof wzoption === "object") {
	wzCharts.setOption(wzoption, true);
}

// 投稿时间对播放量的影响\投稿时间统计
// 基于准备好的dom，初始化echarts实例
	var gdom = document.getElementById("gCharts");
	var gCharts = echarts.init(gdom);
	goption = {
	title: {
		text: '热门视频评论数',
		show:false
	},
	tooltip : {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {c} ({d}%)",
	},
		//  backgroundColor: '#00265f',
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		legend: {
			data: ['综合投稿数', '综合播放量'],
			align: 'right',
			right: '40%',
			top:'0%',
			textStyle: {
				color: "#fff",
				fontSize: '16',
			},
			itemGap: 35
		},
		grid: {
			left: '0%',
			top:'40px',
			right: '0%',
			bottom: '2%',
			containLabel: true
		},
		xAxis: [{
			type: 'category',
			data: ['0', '1', '2', '3', '4', '5',
				   '6', '7', '8', '9', '10', '11',
				   '12', '13', '14', '15', '16', '17',
				   '18', '19', '20', '21', '22', '23'],
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(255,255,255,.1)",
					width: 1,
					type: "solid"
				},
			},
			axisTick: {
				show: false,
			},
			axisLabel:  {
				interval: 0,
				// rotate:50,
				show: true,
				splitNumber: 15,
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: '16',
				},
			},
		}],
		yAxis: [{
			type: 'value',
			axisLabel: {
				//formatter: '{value} %'
				show:true,
				textStyle: {
					color: "rgba(255,255,255,.6)",
					fontSize: '16',
				},
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: "rgba(255,255,255,.1	)",
					width: 1,
					type: "solid"
				},
			},
			splitLine: {
				lineStyle: {
					color: "rgba(255,255,255,.1)",
				}
			}
		}],
		series: [{
			name: '综合投稿数',
			type: 'line',
			data: [${TaV.get(0).ci}, ${TaV.get(1).ci}, ${TaV.get(2).ci}, ${TaV.get(3).ci}, ${TaV.get(4).ci}, ${TaV.get(5).ci},
				   ${TaV.get(6).ci}, ${TaV.get(7).ci}, ${TaV.get(8).ci}, ${TaV.get(9).ci}, ${TaV.get(10).ci}, ${TaV.get(11).ci},
				   ${TaV.get(12).ci}, ${TaV.get(13).ci}, ${TaV.get(14).ci}, ${TaV.get(15).ci}, ${TaV.get(16).ci}, ${TaV.get(17).ci},
				   ${TaV.get(18).ci}, ${TaV.get(19).ci}, ${TaV.get(20).ci}, ${TaV.get(21).ci}, ${TaV.get(22).ci}, ${TaV.get(23).ci}],
			itemStyle: {
				normal: {
					color:'#2fcf52',
					opacity: 1,

					barBorderRadius: 5,
				}
			}
		}, {
			name: '综合播放量',
			type: 'line',
			data: [${TaV.get(0).view}, ${TaV.get(1).view}, ${TaV.get(2).view}, ${TaV.get(3).view}, ${TaV.get(4).view}, ${TaV.get(5).view},
				   ${TaV.get(6).view}, ${TaV.get(7).view}, ${TaV.get(8).view}, ${TaV.get(9).view}, ${TaV.get(10).view}, ${TaV.get(11).view},
				   ${TaV.get(12).view}, ${TaV.get(13).view}, ${TaV.get(14).view}, ${TaV.get(15).view}, ${TaV.get(16).view}, ${TaV.get(17).view},
				   ${TaV.get(18).view}, ${TaV.get(19).view}, ${TaV.get(20).view}, ${TaV.get(21).view}, ${TaV.get(22).view}, ${TaV.get(23).view}],
			barWidth:'15',
			// barGap: 1,
			itemStyle: {
				normal: {
					color:'#cf2f2f',
					opacity: 1,
					barBorderRadius: 5,
				}
			}
		},
		]
	};
if (goption && typeof goption === "object") {
	gCharts.setOption(goption, true);
}

	//根据窗口的大小变动图表
	window.onresize = function(){
	    myChart.resize();
		raCharts.resize();
	    ryCharts.resize();
		clCharts.resize();
		gCharts.resize();
	    jqCharts.resize();
		wzCharts.resize();
		wlCharts.resize();
	}
       </script>
</html>